<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>注册</title>
	<link rel="stylesheet" href="../../libs/node_modules/bootstrap/dist/css/bootstrap.min.css">
	<link rel="stylesheet" href="../../style/common.css">
	<link rel="stylesheet" href="../../style/home/article.css">
	<link rel="stylesheet" href="../../style/login/register.css">
	<script src="../../libs/jquery-3.2.1.min.js"></script>
	<script src="../../libs/vue.js"></script>
	<script src="../../jsc/axios.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
			integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
			crossorigin="anonymous"></script>
	<script src="../../libs/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
	<script src="../../libs/layer-v3.1.1/layer/layer.js"></script>
	<script src="../../libs/node_modules/echarts/dist/echarts.js"></script>
	<!--<script src="js/system.js"></script>-->
</head>
<body>
<div id="app">


	<header-component></header-component>
	<navinner-component></navinner-component>

	<main>
		<div class="content">
			<div class="register-box">
				<form action="" class="register-form" name="content">
					<div class="register-process">
						<span class="active">1</span>用户注册
						<hr style="border:none;border-bottom:1px dashed #FE7600;height:1px;width: 8.94rem">
						<span>2</span>完善信息
						<hr style="border:none;border-bottom:1px dashed #BFBFBF;height:1px;width: 8.94rem">
						<span>√</span>注册成功
					</div>
					<div class="register-input-box">
						<div class="register-input-item" style="position: relative">
							<div class="register-input-name">
								<img src="../../static/icons/用户名.png" alt="">用户名
							</div>
							<input type="text" placeholder="请设置6~12位，作为登录用户名" name="username" @change="inspect">
							<span class="tips error-tips name-error" style="position: absolute;left: 102%;color: red;min-width: 300px;"></span>
						</div>
					</div>
					<div class="register-input-box">
						<div class="register-input-item">
							<div class="register-input-name">
								<img src="../../static/icons/密码(1).png" alt="">设置密码
							</div>
							<input type="password" placeholder="请设置6~12位" name="password" v-model="password">
						</div>
					</div>
					<div class="register-input-box">
						<div class="register-input-item">
							<div class="register-input-name">
								<img src="../../static/icons/密码(1).png" alt="">确认密码
							</div>
							<input type="password" placeholder="请设置6~12位" name="auth_password" @change="repeat"
								   v-model="repeatpwd">
						</div>
					</div>
					<div class="register-input-box">
						<div class="register-input-item">
							<div class="register-input-name">
								<img src="../../static/icons/手机1.png" alt="">手机号
							</div>
							<input type="text" placeholder="请输入11位手机号" name="mobile" v-model="phone">
						</div>
					</div>
					<div class="register-input-box">
						<div class="register-input-item" style="width: 31.75rem">
							<div class="register-input-name">
								<img src="../../static/icons/验证码.png" alt="">验证码
							</div>
							<input type="text" placeholder="请输入验证码" name="code" v-model="captcha">
						</div>
						<a href="javascript:;" class="verify" @click="sendCode">获取验证码<span
								v-if="!timeOff">({{time}})</span></a>
					</div>
					<div class="register-input-box" style="padding-top: 1rem">
						<div class="register-btn" @click="nextstep">下一步</div>
					</div>
					<div class="register-input-login">
						已有账户，<a href="login.html">去登录</a>
					</div>
				</form>
			</div>
		</div>
	</main>
	<footer-component></footer-component>
</div>
<script src="../../jsc/common.js"></script>
<script src="../../jsc/component.js"></script>
<script>

	function perfect() {
		window.location.href = 'perfect-info.html';
	}

	new Vue({
		el: "#app",
		data: {
			reg: /^1[3456789]\d{9}$/,

			detail: {},
			active: 1,
			password: '',
			repeatpwd: '',
			phone: '',        // 手机号
			captcha: '',        // 验证码

			time: 5,
			timeOff: true,      // 是否点击
			nameCanUse: false,
		},
		mounted() {
			var _th = this;
		},
		filters: {},
		methods: {
			inspect: function () {
				var formdata = new FormData(document.forms.namedItem("content"));
				var name = formdata.get('username');
				var that = this;
				axios.post(sysurl + 'common/checkUsernameUnique', {username: name}).then(res => {
					switch (res.data.code) {
						case 0:
							$('.name-error').text(res.data.msg);
							break;
						case 1:
							$('.name-error').text('账号可以使用');
							that.nameCanUse = true;
							break;
						default:
							$('.name-error').text(res.data.msg);
							break;
					}
				});
			},
			repeat: function (e) {
				if (this.password == this.repeatpwd) {
				} else {
					layer.msg('两次密码不一致！');
				}
			},
			nextVerify() {
				var data = transFormData({mobile: this.phone, event: 'register', captcha: this.captcha});

				axios.post(sysurl + 'sms/check', data).then(res => {
					if (res.data.code == 1) {
						this.nextstep();
					} else {
						layer.msg(res.data.msg);
					}
				})
			},
			nextstep: function () {
				var formdata = new FormData(document.forms.namedItem("content"));
				var regdata = {
					name: formdata.get('username'),
					pwd: formdata.get('password'),
					mobile: formdata.get('mobile')
				};
				if (regdata.name.length > 12 || regdata.name.length < 6) {
					layer.msg('用户名为6-12位数字、字母、下划线');
					return false;
				}
				if (!this.nameCanUse) {
					layer.msg('请输入正确的用户名');
					return false;
				}

				if (!regdata.pwd) {
					layer.msg('请输入密码');
					return false;
				}
				if (!this.reg.test(regdata.mobile)) {
					layer.msg('请输入正确的手机号');
					return false;
				}
				if (!formdata.get('code')) {
					layer.msg('请输入验证码');
					return false;
				}

				window.localStorage.setItem('form', JSON.stringify(regdata));
				window.location.href = 'perfect-info.html';
			},
			Register: function () {
				if (this.active === 1) {
					window.location.href = '';
				}
			},
			sendCode() {
				sendTime(this.phone, 'register', this);
			},
		}
	});
</script>
</body>
</html>
